<template>
  <el-dialog
    title="时间查询"
    :visible.sync="show"
    @before-close="handleClose"
    v-if="show"
  >
    <el-form>
      <el-form-item label="时间选择" label-width="80">
        <DatePicker
          v-model="queryTime"
          :timevalue1="queryTime"
          @handleBlur="handleBlur"
        ></DatePicker>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="8">
        <div class="title1">大区业绩</div>
        <div class="value">{{ parseBigPerformance }}</div>
      </el-col>
      <el-col :span="8">
        <div class="title1">小区业绩</div>
        <div class="value">{{ parseSmallPerformance }}</div>
      </el-col>
      <el-col :span="8">
        <div class="title1">总业绩</div>
        <div class="value">{{ parseTotalPerformance }}</div>
      </el-col>
    </el-row>

    <el-table :data="list" border v-loading="loading">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="uid" label="ID" width="70"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="realName" label="真实姓名"></el-table-column>
      <el-table-column prop="team" label="下级人数"></el-table-column>
    </el-table>

    <!-- <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
    </div> -->
  </el-dialog>
</template>
<script>
import DatePicker from "@/components/DatePicker/index.vue";
import { userTeamInfo } from "@/api/ds/user";

export default {
  components: { DatePicker },
  props: {},
  data() {
    return {
      queryTime: [],
      token: "",
      show: false,
      phone: "",

      bigPerformance: 0,
      smallPerformance: 0,
      list: [],

      loading: false,
    };
  },
  computed: {
    parseTotalPerformance() {
      let num = this.bigPerformance + this.smallPerformance;
      num = num.toString();
      let index = num.indexOf(".");
      if (index !== -1) {
        num = num.substring(0, 2 + index + 1);
      } else {
        num = num.substring(0);
      }
      return parseFloat(num).toFixed(2);
    },

    parseBigPerformance() {
      let num = this.bigPerformance;
      num = num.toString();
      let index = num.indexOf(".");
      if (index !== -1) {
        num = num.substring(0, 2 + index + 1);
      } else {
        num = num.substring(0);
      }
      return parseFloat(num).toFixed(2);
    },

    parseSmallPerformance() {
      let num = this.smallPerformance;
      num = num.toString();
      let index = num.indexOf(".");
      if (index !== -1) {
        num = num.substring(0, 2 + index + 1);
      } else {
        num = num.substring(0);
      }
      return parseFloat(num).toFixed(2);
    },
  },
  watch: {},
  created() {},
  methods: {

    handleClose(done) {
      this.queryTime = [];
      this.token = "";
      this.show = false;
      this.phone = "";
      this.bigPerformance = 0;
      this.smallPerformance = 0;
      this.list = [];
      this.loading = false;
      done();
    },
    submit() {
      this.show = false;
      this.$router.push({
        path: `./userTeam`,
        query: { token: this.token, queryTime: this.queryTime },
      });
    },
    async handleTimeChange(val) {
      if (Array.isArray(val)) {
        this.loading = true;
        let query = this.addDateRange({}, this.queryTime, "");
        query.phone = this.phone;
        let res = await userTeamInfo(query);
        this.loading = false;
        if (res.code === 200) {
          this.bigPerformance = res.data.bigPerformance;
          this.smallPerformance = res.data.smallPerformance;
          this.list = res.data.list;
        }
      }
    },

    handleBlur(val) {
      this.handleTimeChange(val);
    },
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  deactivated() {},
};
</script>
<style lang="scss" scoped>
.title1 {
  width: 100%;
  line-height: 20px;
  height: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

.value {
  width: 100%;
  text-align: center;
  font-size: 24px;
  height: 40px;
  line-height: 40px;
}
</style>
